<template>
    <a-modal
      :title="title+'品牌'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @cancel="cancel"
      @ok="ok"
    >
    
    <a-form-model ref="editTableForm"  :rules="editTablerules" v-model="formDatas" layout="vertical" :labelCol="{span: 4}"
     :wrapperCol="{span: 19}">
        <a-form-model-item label="默认头像" >
          <upImages :url.sync="formDatas.default_avatar"></upImages>
        </a-form-model-item>
        <a-form-model-item label="品牌名称" prop="name">
          <a-input v-model="formDatas.name"  placeholder="请输入品牌名称" />
        </a-form-model-item>
        <a-form-model-item label="品牌标识" prop="mark">
          <a-input v-model="formDatas.mark" placeholder="请输入品牌标识" />
        </a-form-model-item>
        <a-form-model-item label="APP标识" prop="app_mark">
          <a-input v-model="formDatas.app_mark" placeholder="请输入APP标识" />
        </a-form-model-item>
        <a-form-model-item label="H5地址" >
          <a-input v-model="formDatas.h5_url" placeholder="请输入H5地址" />
        </a-form-model-item>
        <a-form-model-item label="联系电话" >
          <a-input v-model="formDatas.phone" placeholder="请输入联系电话" />
        </a-form-model-item>
        <a-form-model-item label="状态" >
          <a-radio-group v-model="formDatas.status">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="2"> 禁用 </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </template>
  
  <script>
  import { editBrandListApi } from '@/api/brand.js'
  export default {
    components: {
    },
    data() {
      return {
        visible:false,
        title:"添加",
        confirmLoading:false,
        loading:false,

        formDatas:{
          default_avatar:"",
          name:"",
          mark:"",
          app_mark:"",
          h5_url:"",
          phone:"",
          status:1,
        },
        editTablerules:{
          name:[
            { required: true, message: '请输入品牌名称', trigger: 'blur' },
          ],
          mark:[
            { required: true, message: '请输入品牌标识', trigger: 'blur' },
          ],
          app_mark:[
            { required: true, message: '请输入APP标识', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
    },
    computed:{
    },
    methods: {
      openEditTable(json){
        this.formDatas={
          default_avatar:"",
          name:"",
          mark:"",
          app_mark:"",
          h5_url:"",
          phone:"",
          status:1,
        }
          this.title='新增'
        if(json){
          this.title='修改'
          this.formDatas=JSON.parse(JSON.stringify(json))
          this.formDatas.ids=json.id
        }
        this.visible=true
      },
      handleOk(){
        this.visible=false
      },
      cancel(){
        this.handleOk()
      },
      ok(){
        editBrandListApi({...this.formDatas,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res=>{
        this.$message.success("操作成功");
          this.handleOk()
          this.$emit("changes")
        })
      },



    }
  }
  </script>
  
  <style lang="less" scoped>

  /deep/ .ant-form-vertical .ant-form-item{
    margin-bottom: 5px;
  }
  /deep/ .ant-form-vertical .ant-form-item-label{
    padding-top: 4px;
  }
  </style>
  